<template>
  <div class="report-form-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <!-- <template #headerRightButton>
        <el-button @click="handleExport()" type="primary">
          <CIcon type="c-xian-daochu" class="g-mr4"></CIcon>
          导出为excel
        </el-button>
      </template> -->
      <template #organizationNameSlot="{ scope }">
        {{ scope.row.valueMap.organizationName }}
      </template>
      <template #totalEmissionSlot="{ scope }">
        {{ scope.row.valueMap.totalEmission }}
      </template>
      <template #proportionSlot="{ scope }">
        {{ scope.row.valueMap.proportion }}
      </template>
    </CPageTable>
  </div>
</template>
<script lang="ts">
export default {
  name: 'ReportFormManagement'
};
</script>
<script lang="ts" setup>
import { reactive, Ref } from 'vue';
import { useDetail } from './useDetail';
import {
  TableFieldsSettingType,
  CPageTable,
  useCPageTable,
  CPageTableProps
} from '@/components/CPageTable';
import { useExport } from '@/hooks/useExport';
import { useMessage } from '@/hooks/useMessage';
import { exportEmissionData } from '@/apis/eci/emissionAccounting/detail';
import { cloneDeep } from 'lodash';
import type { GetListEmissionTaskResult } from '@/apis/eci/emissionAccounting/model/detailModel';
import { getListPeriod } from '@/apis/eci/reportFormManagement/reportFormManagement';
import { useRoute } from 'vue-router';

const { searchForm, tableOptions, searchOptions, tableFieldsSetting, title } = useDetail(
  onSearchFormCodeChange,
  handleUploadFields,
  handleExpandAll
);
const options = reactive<CPageTableProps>({
  title,
  searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh, setProps, updateTableFieldsSetting, operationTable }] =
  useCPageTable(options);

// const handleExport = () => {
//   if (getTotal() > 0) {
//     const params = handleParams();
//     handleExportFile(exportEmissionData, params);
//   } else {
//     createMessage.warning('没有可以导出的数据！');
//   }
// };

async function onSearchFormCodeChange(list: GetListEmissionTaskResult[]) {
  console.log('onSearchFormCodeChange', searchForm.organizationCode, list);
  const op = cloneDeep(searchOptions);
  op[1].disabled = false;
  const periodsList = await getListPeriod(searchForm.organizationCode);
  console.log('onSearchFormCodeChange res', periodsList);
  // 获取已选中组织的盘查周期列表
  op[1].options = periodsList.map(item => {
    return {
      label: item,
      value: item
    };
  });
  searchForm.inventoryYear = '';
  searchForm.standard = '';
  // 如果有盘查周期，设置
  if (op[1].options?.length) {
    searchForm.inventoryYear = op[1].options[0].value;
  } else {
    searchForm.inventoryYear = '';
  }
  console.log('onSearchFormChange', op, searchForm.inventoryYear);
  setProps({
    searchOptions: op
  });
  refresh();
}

/**
 * 展开所有节点
 */
function handleExpandAll() {
  operationTable((baseTableRef: Ref<any>) => {
    baseTableRef.value?.setAllTreeExpand(true);
  });
}

function handleUploadFields(fieldsSetting: TableFieldsSettingType[]) {
  updateTableFieldsSetting(fieldsSetting);
}
</script>

<style lang="scss" scoped>
:deep(.vxe-table) {
  .vxe-tree--btn-wrapper {
    top: 6px;
    .vxe-tree--node-btn {
      color: #435970 !important;
    }
  }
}
</style>
